<template>
	<view>
		<view class="bg-linear-ger" style="height: 250px;">
			<img class="pl-2 mt-5" src="static/logo.png" alt="" srcset="" />
		</view>
		<view class="bg-white rounded-top" style="position: relative; top: -100px">
			<view class="p-5 font text-FFC251 font-weight-bold-600">欢迎登录</view>
			<view class="pl-2 pr-2 lineHight-3">
				<u-field v-model="mobile" label="手机号" placeholder="请输入所绑定的手机号">
				</u-field>
				<u-field v-model="code" label="验证码" placeholder="输入验证码">
					<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-toast ref="uToast"></u-toast>
				<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
					@change="codeChange"></u-verification-code>


				<view class="u-inline-block">
					<u-checkbox v-model="agreementChecked" :label="true">我已阅读并同意</u-checkbox>
					<u-link href="/service-agreement" class="text-primary">《服务协议》</u-link>
					<u-link href="/privacy-policy" class="text-primary">《隐私政策》</u-link>
				</view>
			</view>

			<view class="pl-3 pr-3 ">
				<u-button shape="circle" @tap="verifyCaptcha" type="success" :disabled="!agreementChecked">登录</u-button>
			</view>

			<view class="text-center ">
				<view class=" font-13 text-999999 mt-2">其他登录方式</view>
				<view class="top-15 position-relative"  @click="gitMins('/pages/login/login')">
					<i class="p-1 iconfont icon-mima font-28 main-text-color border-s "></i>
				</view>
			</view>
			<view  @click="gitMin('/pages/tabbar/index/index')" class="position-absolute text-999999 font-13" style="margin-top: 50px; z-index: 1; left: 42.5%;">游客登录
			</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	export default {
		data() {
			return {
				codeText: '',
				mobile: '', // 手机号
				code: '', // 验证码
				seconds: 60,
				agreementChecked: false // 是否同意协议
			};
		},
		mounted() {

		},
		methods: {
			codeChange(text) {
				this.codeText = text;
			},
			validatePhoneNumber(phoneNumber) {
			    // 创建一个正则表达式来匹配中国大陆地区手机号码格式
			    var regex = /^1\d{10}$/;
			    // 使用 test 方法检查输入的手机号码是否符合格式要求
			    return regex.test(phoneNumber);
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if(this.mobile.length==0){
						uni.showToast({
							title:"请填写手机号码",
							icon:"error"
						});
						return;
					}
					if (!this.validatePhoneNumber(this.mobile)) {
					    uni.showToast({
					    	title:"手机号码格式错误",
							icon:"error"
					    });
						return;
					}
					// 模拟向后端请求验证码
					this.sendSms();
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('请等待倒计时结束以后再重新发送');
				}
			},
			sendSms(){
				uni.showLoading({
					title: '发送中'
				});
				$H.get('/brand/user/upper/sendSms?phone='+this.mobile,{},{token: false})
				.then(res=>{
					if(!res.success||res.code!=200){
						uni.showToast({
							title: res.message||'获取验证码失败',
							icon: 'error'
						});
						return;
					}
					uni.showToast({
						title: '获取验证码成功！',
						icon: 'success'
					});
				})
				// $H.post('/brand/user/upper/sendSms?phone='+this.mobile, {}, {
				// 			token: false
				// 		})
				// 		.then(res => {
				// 			if(!res.success){
				// 				uni.showToast({
				// 				title: res.message||'登录失败',
				// 				icon: 'error'
				// 			});
				// 			return;
				// 			}
				// 			uni.showToast({
				// 				title: '登录成功！',
				// 				icon: 'success'
				// 			});
				// 			$U.setStorage('token',res.result.token);
				// 			$U.setStorage('phone',res.result.phone);
				// 			$U.setStorage('legalRepresentative',res.result.legalRepresentative);
				// 			$U.setStorage('id',res.result.id);
				// 			$U.setStorage('enterpriseName',res.result.enterpriseName);
				// 			$U.setStorage('avatar',res.result.avatar);
							
				// 			// 登录成功后跳转到首页
				// 			uni.switchTab({
				// 				url: '/pages/tabbar/index/index'
				// 			});
				// 		})
				// 		.catch(error => {
				// 			console.log("12123123",error);
				// 			console.error('请求出错', error); // 处理任何错误  
				// 			uni.showToast({
				// 				title: '登录失败',
				// 				icon: 'none'
				// 			});
				// 		});
				// }
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			},
			gitMins(url){
				uni.navigateTo({
					url
				})
			},
			gitMin(url) {
				uni.switchTab({
					url
				});
			}
		}
	};
</script>

<style scoped>
	canvas {
		border: 1px solid #cccccc;
	}

	input,
	button {
		margin-top: 10px;
	}

	.u-border-bottom:after {
		border-bottom: 1px solid #FFC251 !important;
	}
</style>